<template>
	<div class="app-container">
	  <!-- 左侧导航 -->
	  <div class="sidebar-container">
		<div class="logo-box">
		  <img src="@/assets/logo.png" class="logo-img" alt="logo">
		  <span class="logo-text">景区管理系统</span>
		</div>
		
		<el-menu
		  :default-active="activeMenu"
		  class="sidebar-menu"
		  background-color="#304156"
		  text-color="#bfcbd9"
		  active-text-color="#409EFF"
		  unique-opened>
		  
		  <el-menu-item index="1" @click="gohoutai">
			<i class="el-icon-location"></i>
			<span>景点管理</span>
		  </el-menu-item>
		  
		  <el-menu-item index="2">
			<i class="el-icon-ticket"></i>
			<span>活动管理</span>
		  </el-menu-item>
		</el-menu>
	  </div>
  
	  <!-- 主要内容区 -->
	  <div class="main-container">
		<!-- 顶部导航 -->
		<div class="navbar">
		  <div class="left-menu">
			<i class="el-icon-s-fold"></i>
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item>首页</el-breadcrumb-item>
			  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
			</el-breadcrumb>
		  </div>
		  
		  <div class="right-menu">
			<el-dropdown trigger="click">
			  <span class="el-dropdown-link">
				管理员 <i class="el-icon-arrow-down el-icon--right"></i>
			  </span>
			  <el-dropdown-menu slot="dropdown">
				<el-dropdown-item>个人信息</el-dropdown-item>
				<el-dropdown-item>退出登录</el-dropdown-item>
			  </el-dropdown-menu>
			</el-dropdown>
		  </div>
		</div>
  
		<!-- 内容区域 -->
		<div class="app-main">
		  <!-- 搜索区域 -->
		  <div class="search-container">
			<el-card shadow="never">
			  <el-form :inline="true" :model="form01" class="search-form">
				<el-form-item label="活动名称">
				  <el-input
					v-model="form01.nameEvents"
					placeholder="请输入活动名称"
					prefix-icon="el-icon-search"
					clearable>
				  </el-input>
				</el-form-item>
				
				<el-form-item>
				  <el-button type="primary" @click="getEvents" icon="el-icon-search">
					查询
				  </el-button>
				  <el-button type="success" @click="dialogFormVisible = true" icon="el-icon-plus">
					添加活动
				  </el-button>
				</el-form-item>
			  </el-form>
			</el-card>
		  </div>
  
		  <!-- 表格区域 -->
		  <div class="table-container">
			<el-card shadow="never">
			  <el-table
				v-loading="tableLoading"
				:data="eventsList"
				border
				stripe
				style="width: 100%"
				height="calc(100vh - 380px)">
				
				<el-table-column prop="id" label="编号" width="80" align="center"></el-table-column>
				<el-table-column prop="nameEvents" label="活动名称" min-width="120"></el-table-column>
				<el-table-column prop="catchwordEvents" label="活动口号" min-width="120"></el-table-column>
				<el-table-column prop="objectEvents" label="活动对象" width="120"></el-table-column>
				<el-table-column prop="timeEvents" label="活动时间" width="120"></el-table-column>
				<el-table-column prop="addressEvents" label="活动地点" min-width="120"></el-table-column>
				<el-table-column prop="expenseEvents" label="活动费用" width="100"></el-table-column>
				<el-table-column prop="unitEvents" label="举办单位" min-width="120"></el-table-column>
				<el-table-column prop="trlEvents" label="咨询电话" width="120"></el-table-column>
				<el-table-column prop="InstruEvents" label="活动说明" min-width="150" show-overflow-tooltip></el-table-column>
				<el-table-column prop="urlEvents" label="活动图片" width="100" align="center">
				  <template slot-scope="scope">
					<el-image
					  :src="scope.row.urlEvents"
					  fit="cover"
					  style="width: 60px; height: 60px; border-radius: 4px;"
					  :preview-src-list="[scope.row.urlEvents]">
					  <div slot="error" class="image-slot">
						<i class="el-icon-picture-outline"></i>
					  </div>
					</el-image>
				  </template>
				</el-table-column>
			  </el-table>
  
			  <!-- 分页 -->
			  <div class="pagination-container">
				<el-pagination
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :current-page="page"
				  :page-sizes="[10, 20, 30, 50]"
				  :page-size="size"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="total">
				</el-pagination>
			  </div>
			</el-card>
		  </div>
		</div>
	  </div>
  
	  <!-- 添加活动弹窗 -->
	  <el-dialog
		title="添加活动"
		:visible.sync="dialogFormVisible"
		width="50%"
		:close-on-click-modal="false"
		custom-class="custom-dialog">
		<el-form :model="form02" label-width="100px" :rules="rules" ref="form02">
		  <el-form-item label="活动名称" prop="nameEvents">
			<el-input v-model="form02.nameEvents" placeholder="请输入活动名称"></el-input>
		  </el-form-item>
  
		  <el-form-item label="活动口号" prop="catchwordEvents">
			<el-input v-model="form02.catchwordEvents" placeholder="请输入活动口号"></el-input>
		  </el-form-item>
  
		  <el-form-item label="活动对象" prop="objectEvents">
			<el-input v-model="form02.objectEvents" placeholder="请输入活动对象"></el-input>
		  </el-form-item>
  
		  <el-form-item label="活动时间" prop="timeEvents">
			<el-date-picker
			  v-model="form02.timeEvents"
			  type="date"
			  value-format="yyyy-MM-dd"
			  placeholder="选择日期">
			</el-date-picker>
		  </el-form-item>
  
		  <el-form-item label="活动地点" prop="addressEvents">
			<el-input v-model="form02.addressEvents" placeholder="请输入活动地点"></el-input>
		  </el-form-item>
  
		  <el-form-item label="活动费用" prop="expenseEvents">
			<el-input v-model="form02.expenseEvents" placeholder="请输入活动费用"></el-input>
		  </el-form-item>
  
		  <el-form-item label="举办单位" prop="unitEvents">
			<el-input v-model="form02.unitEvents" placeholder="请输入举办单位"></el-input>
		  </el-form-item>
  
		  <el-form-item label="咨询电话" prop="trlEvents">
			<el-input v-model="form02.trlEvents" placeholder="请输入咨询电话"></el-input>
		  </el-form-item>
  
		  <el-form-item label="活动说明" prop="instruEvents">
			<el-input
			  type="textarea"
			  :rows="4"
			  v-model="form02.instruEvents"
			  placeholder="请输入活动说明">
			</el-input>
		  </el-form-item>
  
		  <el-form-item label="活动图片" prop="urlEvents">
			<el-upload
			  class="avatar-uploader"
			  action="http://localhost:7777/api-product/oss/upload"
			  :show-file-list="false"
			  :on-success="handleAvatarSuccess"
			  :before-upload="beforeAvatarUpload">
			  <img v-if="form02.urlEvents" :src="form02.urlEvents" class="avatar">
			  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			<div class="upload-tip">支持 jpg 格式，大小不超过 2MB</div>
		  </el-form-item>
		</el-form>
		
		<div slot="footer" class="dialog-footer">
		  <el-button @click="dialogFormVisible = false">取 消</el-button>
		  <el-button type="primary" @click="add">确 定</el-button>
		</div>
	  </el-dialog>
	</div>
  </template>
  
  <script>
  import axios from 'axios'
  
  export default {
	name: 'EventManagement',
	data() {
	  return {
		activeMenu: '2',
		tableLoading: false,
		dialogFormVisible: false,
		form01: {},
		form02: {},
		eventsList: [],
		page: 1,
		size: 10,
		total: 0,
		rules: {
		  nameEvents: [
			{ required: true, message: '请输入活动名称', trigger: 'blur' }
		  ],
		  catchwordEvents: [
			{ required: true, message: '请输入活动口号', trigger: 'blur' }
		  ],
		  objectEvents: [
			{ required: true, message: '请输入活动对象', trigger: 'blur' }
		  ],
		  timeEvents: [
			{ required: true, message: '请选择活动时间', trigger: 'change' }
		  ],
		  addressEvents: [
			{ required: true, message: '请输入活动地点', trigger: 'blur' }
		  ],
		  expenseEvents: [
			{ required: true, message: '请输入活动费用', trigger: 'blur' }
		  ],
		  unitEvents: [
			{ required: true, message: '请输入举办单位', trigger: 'blur' }
		  ],
		  trlEvents: [
			{ required: true, message: '请输入咨询电话', trigger: 'blur' }
		  ],
		  instruEvents: [
			{ required: true, message: '请输入活动说明', trigger: 'blur' }
		  ],
		  urlEvents: [
			{ required: true, message: '请上传活动图片', trigger: 'change' }
		  ]
		}
	  }
	},
	created() {
	  this.getEvents()
	},
	methods: {
	  getEvents() {
		this.tableLoading = true
		axios.post(`http://localhost:7777/api-product/events/findAll?page=${this.page}&size=${this.size}`, 
		  this.form01
		).then(res => {
		  if (res.data.code === 200) {
			this.eventsList = res.data.data.list
			this.total = res.data.data.total
		  }
		}).finally(() => {
		  this.tableLoading = false
		})
	  },
  
	  add() {
		this.$refs.form02.validate((valid) => {
		  if (valid) {
			axios.post('http://localhost:7777/api-product/events/add', this.form02).then(res => {
			  if (res.data.code === 200) {
				this.$message.success('添加成功')
				this.dialogFormVisible = false
				this.getEvents()
				this.form02 = {}
			  } else {
				this.$message.error(res.data.msg || '添加失败')
			  }
			})
		  }
		})
	  },
  
	  handleSizeChange(val) {
		this.size = val
		this.getEvents()
	  },
  
	  handleCurrentChange(val) {
		this.page = val
		this.getEvents()
	  },
  
	  gohoutai() {
		this.$router.push('/houtai')
	  },
  
	  handleAvatarSuccess(res) {
		this.form02.urlEvents = res.data
	  },
  
	  beforeAvatarUpload(file) {
		const isJPG = file.type === 'image/jpeg'
		const isLt2M = file.size / 1024 / 1024 < 2
  
		if (!isJPG) {
		  this.$message.error('上传图片只能是 JPG 格式!')
		}
		if (!isLt2M) {
		  this.$message.error('上传图片大小不能超过 2MB!')
		}
		return isJPG && isLt2M
	  }
	}
  }
  </script>
  <style>
  .app-container {
	height: 100vh;
	display: flex;
  }
  
  .sidebar-container {
	width: 210px;
	height: 100%;
	background: #304156;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	overflow-y: auto;
  }
  
  .logo-box {
	height: 60px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	background: #2b2f3a;
  }
  
  .logo-img {
	width: 32px;
	height: 32px;
	margin-right: 12px;
  }
  
  .logo-text {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
  }
  
  .sidebar-menu {
	border: none;
  }
  
  .sidebar-menu:not(.el-menu--collapse) {
	width: 210px;
  }
  
  .main-container {
	flex: 1;
	margin-left: 210px;
	display: flex;
	flex-direction: column;
	background: #f0f2f5;
	min-height: 100vh;
  }
  
  .navbar {
	height: 50px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,21,41,.08);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
  }
  
  .left-menu {
	display: flex;
	align-items: center;
  }
  
  .left-menu i {
	font-size: 20px;
	cursor: pointer;
	margin-right: 20px;
  }
  
  .right-menu .el-dropdown-link {
	cursor: pointer;
	color: #666;
  }
  
  .right-menu .el-dropdown-link:hover {
	color: #409EFF;
  }
  
  .app-main {
	padding: 20px;
	flex: 1;
	overflow-y: auto;
  }
  
  .search-container {
	margin-bottom: 20px;
  }
  
  .search-container .el-card {
	margin-bottom: 0;
  }
  
  .table-container .card-title {
	font-size: 16px;
	font-weight: 500;
  }
  
  .table-container .float-right {
	float: right;
  }
  
  .avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
	border-color: #409EFF;
  }
  
  .avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 148px;
	height: 148px;
	line-height: 148px;
	text-align: center;
  }
  
  .avatar {
	width: 148px;
	height: 148px;
	display: block;
	object-fit: cover;
  }
  
  .upload-tip {
	font-size: 12px;
	color: #909399;
	margin-top: 8px;
  }
  
  .pagination-container {
	padding: 20px 0;
	text-align: right;
  }
  
  .custom-dialog .el-dialog__body {
	padding: 30px 20px;
  }
  
  .custom-dialog .el-form-item {
	margin-bottom: 22px;
  }
  
  .custom-dialog .el-select {
	width: 100%;
  }
  
  @media screen and (max-width: 1200px) {
	.sidebar-container {
	  width: 64px;
	}
	
	.logo-text {
	  display: none;
	}
	
	.main-container {
	  margin-left: 64px;
	}
  }
  </style>